<template>
  <div class="assetsAndMaterials">
    <headerBox :leftData="leftData" :active="2"></headerBox>
    <div class="assetsAndMaterials_content">
      <div class="assetsAndMaterials_content_top content_box" @click="goToUrl(0)">
        <tableBox class="goodsTable" :data="goodsTableData" :show-serial-number="false" :showThead="false" />
        <pieChart id="goodsCharts" ref="goodsCharts" height="100%" width="40%"></pieChart>
      </div>
      <div class="assetsAndMaterials_content_center content_box">
        <lineBarChart ref="consumeChart" id="consumeChart" width="80%" height="96%"></lineBarChart>
        <tableBox class="consumeTable" :data="tableData" :show-serial-number="true" :showThead="false"
          @goToUrl="goToUrl" />
      </div>
      <div class="assetsAndMaterials_content_bottom">
        <div class="bottom_left" @click="goToUrl(2)">
          <pieChart id="purchasePieChart" ref="purchasePieChart" height="100%" width="50%"></pieChart>
          <tableBox class="purchaseTable" :data="purchaseTableData" :show-serial-number="true" :showThead="false" />
        </div>
        <div class="bottom_center" @click="goToUrl(3)">
          <pieChart id="consumePieChart" ref="consumePieChart" height="100%"></pieChart>
          <tableBox class="consumeTable" :data="consumeTableData" :show-serial-number="true" :showThead="false" />
        </div>
        <div class="bottom_right" @click="goToUrl(4)">
          <pieChart id="deliveryPieChart" ref="deliveryPieChart" height="100%"></pieChart>
          <tableBox class="deliveryTable" :data="deliveryTableData" :show-serial-number="true" :showThead="false" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerBox from "../components/header.vue"
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"
import lineBarChart from "../components/lineBarChart.vue"
import {
  getStockStatisticsTable, getCommodityTypeRate, getMaterialsInfoCostDayImg, getMaterialsInfoCostTable,
  getProcureCommodityTypeRate, getProcureNumberInfoTable, getMaterialsConsumeRate, getMaterialsConsumeTable, getMaterialsAllocateRate, getMaterialsAllocateNumberInfoTable
} from "@/api/bi/assetsAndMaterials";
export default {
  components: { headerBox, lineBarChart, tableBox, pieChart },
  data() {
    return {
      leftData: {
        title: '资产物资',
        desc: 'Assets and Materials'
      },
      load: null,
      time: null,
      radio: '数量',
      goodsTableData: [],
      tableData: [],
      purchaseTableData: [],
      consumeTableData: [],
      deliveryTableData: []
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    let date = new Date()
    this.time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月'
    this.gettStockTableData()
    this.getCommodityTypeData()
    this.getMaterialsInfoCostData()
    this.getMaterialsInfoCostDay()


    this.getPurchase()
    this.getConsume()
    this.getDelivery()
  },
  methods: {
    // 获取物资库存   
    async gettStockTableData() {
      const { data: res } = await getStockStatisticsTable();
      let style = "background: #EEEFF3;border-right:1px solid #fff"
      let styleT = "background: #EEEFF3;border-right:1px solid #fff;border-top:1px solid #fff"

      let head = [
        [{ val: '类别', rowspan: 2, style }, { val: '公司库存', colspan: 2, style }, { val: '项目库存', colspan: 2, style }, { val: '个人库存', colspan: 2, style }, { val: '合计数量', rowspan: 2, style }],
        [{ val: '类别', style: styleT }, { val: '金额', style: styleT }, { val: '类别', style: styleT }, { val: '金额', style: styleT }, { val: '类别', style: styleT }, { val: '金额', style: styleT }],
      ]
      let arr = []
      res.forEach((item, index) => {
        let total = item.stockNumber + item.projectNumber + item.peopleNumber
        arr.push([{ val: item.commodityTypeName }, { val: item.stockNumber }, { val: item.stockMoney }, { val: item.projectNumber }, { val: item.projectMoney }, { val: item.peopleNumber }, { val: item.peopleMoney }, { val: total }],)
      })

      this.goodsTableData = [...head, ...arr]
    },
    // 获取商品类别占比图
    async getCommodityTypeData() {
      const { data: res } = await getCommodityTypeRate();
      let chartData = []
      res.forEach((item, index) => {
        chartData.push({ value: item.commodityTypeRate, name: item.commodityTypeName })
      })

      let l = {
        orient: 'vertical',
        right: 0,
        top: 'center',
        bottom: 20,
      }
      let title = {
        text: '商品类别占比',
        left: 'center'
      }
      this.$refs.goodsCharts.initChart(chartData, l, title, '60%')

    },
    // 获取消耗/维修/折旧数据
    async getMaterialsInfoCostDay() {
      const { data: res } = await getMaterialsInfoCostDayImg();
      let title = {
        text: '消耗/维修/折旧走势图',
        left: 'center'
      }
      let xAxisData = []
      let legendData = { show: true, data: ['物资消耗', '维修费用', '设备折旧', '计划值', '基线值'] }
      let seriesData = []
      let dataNum = this.getDaysInMonth()
      for (let i = 1; i <= dataNum; i++) {
        xAxisData.push(i)
      }
      legendData.data.forEach((item, index) => {

        let type = { type: 'line' }
        if (index < 3) {
          type = {
            type: 'bar',
            stack: 'Ad',
          }
        }
        seriesData.push(
          {
            name: legendData.data[index],
            ...type,
            data: res.dataVal[index],
          },
        )
      })

      this.$refs.consumeChart.initChart(legendData, xAxisData, seriesData, title)
      this.load.close();

    },

    // 获取表格数据
    async getMaterialsInfoCostData() {
      const { data: res } = await getMaterialsInfoCostTable();

      this.tableData = [
        [{ val: '设备折旧/增值', click: 'goToUrl', key: 1, style: "cursor: pointer;color:#409EFF" }, { val: res.zj + '/' + res.zz }],
        [{ val: '维修费用' }, { val: res.wx }],
        [{ val: '低值消耗', click: 'goToUrl', key: 3, style: "cursor: pointer;color:#409EFF" }, { val: res.dz }],
        [{ val: '基数差异' }, { val: res.pvDiff.toFixed(2) }],
        [{ val: '计划差异' }, { val: res.rvDiff.toFixed(2) }],
      ]

    },
    // 获取采购订单 
    async getPurchase() {
      const { data: rateRes } = await getProcureCommodityTypeRate();
      const { data: tableRes } = await getProcureNumberInfoTable();
      let chartData = []
      rateRes.forEach((item, index) => {
        chartData.push({ value: item.commodityTypeRate, name: item.commodityTypeName },)
      })
      let title = {
        text: '采购订单',
        left: 'center'
      }
      this.$refs.purchasePieChart.initChart(chartData, null, title,)

      this.purchaseTableData = [
        [{ val: '总订单数量', }, { val: tableRes.sumNumber }],
        [{ val: '合计已完成订单', }, { val: tableRes.successNumber }],
        [{ val: '合计未完成订单', }, { val: tableRes.unSuccessNumber }],
        [{ val: '已交付订单', }, { val: tableRes.deliverNumber }],
        [{ val: '未交付订单', }, { val: tableRes.unDeliverNumber }],
      ]
    },

    // 获取总消耗量
    async getConsume() {

      const { data: rateRes } = await getMaterialsConsumeRate();
      const { data: tableRes } = await getMaterialsConsumeTable();

      let chartData = []
      rateRes.forEach((item, index) => {
        chartData.push({ value: item.commodityTypeRate, name: item.commodityTypeName },)
      })
      let title = {
        text: '总消耗量',
        left: 'center'
      }
      this.$refs.consumePieChart.initChart(chartData, null, title,)

      let arr = []
      tableRes.forEach((item, index) => {
        arr.push([{ val: item.commodityTypeName, }, { val: item.commodityNumber }],)
      })
      this.consumeTableData = [...arr]
    },

    // 配送订单
    async getDelivery() {

      const { data: rateRes } = await getMaterialsAllocateRate();
      const { data: tableRes } = await getMaterialsAllocateNumberInfoTable();

      let chartData = []
      rateRes.forEach((item, index) => {
        chartData.push({ value: item.businessRate, name: item.projectBusiness },)
      })
      let title = {
        text: '配送订单',
        left: 'center'
      }
      this.$refs.deliveryPieChart.initChart(chartData, null, title,)

      this.deliveryTableData = [
        [{ val: '总配送订单数量', }, { val: tableRes.sumNumber }],
        [{ val: '开具订单数', }, { val: tableRes.successNumber }],
        [{ val: '取消订单数', }, { val: tableRes.unSuccessNumber }],
        [{ val: '未完成订单数', }, { val: tableRes.unSuccessNumber }],
        [{ val: '已完成订单数', }, { val: tableRes.deliverNumber }],
      ]
    },
    // 千分位格式化并保留两位小数
    formatPrice(price) {
      return price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    // 获取当月天数
    getDaysInMonth() {
      const today = new Date();
      const currentYear = today.getFullYear();
      const currentMonth = today.getMonth() + 1;
      const nextMonth = new Date();
      nextMonth.setFullYear(currentYear, currentMonth, 1);
      nextMonth.setDate(nextMonth.getDate() - 1);
      return nextMonth.getDate();
    },
    // 跳转
    goToUrl(active) {
      this.$router.push({ path: '/assetsAndMaterials/item', query: { active } })
    }
  }

}
</script>
<style lang="scss" scoped>
.assetsAndMaterials {
  background: #F2F4FC;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .title {
    line-height: 39px;
    color: rgba(0, 0, 0, 1);
    font-size: 28px;
    text-align: center;
  }

  .assetsAndMaterials_content {
    flex-grow: 1;
    height: 100%;
    width: 100%;

    padding: 16px 22px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;

    .content_box {
      background-color: rgba(255, 255, 255, 0.6);
      width: 100%;
      height: 30%;
      padding: 16px 22px;
      flex-grow: 1;
    }

    .content_box:nth-child(2) {
      margin: 20px 0;
    }

    .assetsAndMaterials_content_top {
      display: flex;
      width: 100%;

      .goodsTable {
        flex-grow: 1;
      }
    }

    .assetsAndMaterials_content_center {
      display: flex;
      width: 100%;

      .consumeTable {
        width: 30%;
      }
    }

    .assetsAndMaterials_content_bottom {
      display: flex;
      justify-content: space-around;
      background: transparent;
      height: 30%;

      >div {
        width: 33%;
        padding: 16px 22px;
        background-color: rgba(255, 255, 255, 0.6);
        display: flex;
      }

      .purchaseTable {
        width: 48%;
      }
    }

  }
}
</style>
